<template>
  <div id="content">
    <el-card class="box-card" style="height: 100%;">
      <div slot="header" class="clearfix">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button size="medium" type="goon" round  @click="dialogVisible = true">注册服务</el-button>
            <el-button size="medium" type="goon" round  @click="dialogVisibleToken = true">申请令牌</el-button>
          </el-col>
        <!--  <el-col :span="3">
            <el-select size="medium"  v-model="selectType"  clearable placeholder="请选择服务类型" @change="changeServerType">
              <el-option
                v-for="item in serverType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>-->
          <el-col :span="4">
            <el-input size="medium" placeholder="请输入服务名查询"  class="input-with-select" clearable v-model="searchServerName" @change="changeSearch">
              <el-button type="goon"  size="medium" round  slot="append" icon="el-icon-search" @click="searchServer"  >搜索</el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div class="serverTable">
      <el-table
        ref="multipleTable"
        :data="layerInfo"
        border
        class="tableList"
        tooltip-effect="dark"
        height="100%"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
        >
        </el-table-column>
        <el-table-column
          label="服务名称"
          prop="layerName"
          min-width="5%">
        </el-table-column>
        <el-table-column
          prop="fileName"
          label="原文件名称"
          min-width="5%">
        </el-table-column>
        <el-table-column
          prop="fwtype"
          label="服务类型"
          min-width="2%">
        </el-table-column>
        <el-table-column
          prop="gxtype"
          label="共享类型"
          min-width="2%">
        </el-table-column>
        <!--<el-table-column
          prop="person"
          label="更新人"
          min-width="2%">
        </el-table-column>
        <el-table-column
          prop="time"
          label="更新时间"
          min-width="3%">
        </el-table-column>-->
        <el-table-column
          prop="url"
          label="服务地址"
          min-width="8%"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <a href='#' @click="showMap(scope.row.url)">{{scope.row.url}}</a>
          </template>
        </el-table-column>
        <!--<el-table-column
          label="操作"
          min-width="4%"
        >
          <template v-slot="scope">
            <el-tooltip effect="dark" content="修改服务" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini" ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除服务" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="分配权限" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>-->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="tInfo.pageNumber -= 1"
        @next-click="tInfo.pageNumber += 1"
        :current-page="tInfo.pageNumber"
        :page-sizes="[5,10, 20, 50]"
        :page-size="tInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="注册服务"
      :visible.sync="dialogVisible"
      width="30%"
      center
      :before-close="handleClose"
      @close="dialogClose"
    >
      <el-form ref="addFormRef" :model="addForm" label-width="80px" :rules="addFormRule" >
        <el-form-item label="服务类型" prop="typeServer">
          <el-select v-model="addForm.typeServer"  clearable  placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in serverType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据地址" prop="serverUrl">
          <el-input v-model="addForm.serverUrl"></el-input>
        </el-form-item>
        <el-form-item label="服务名称" prop="serverName">
          <el-input v-model="addForm.serverName"></el-input>
        </el-form-item>
        <el-form-item label="权限令牌" prop="serverToken">
          <el-input v-model="addForm.serverToken"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button round type="goon" size="medium" @click="dialogVisible = false">取 消</el-button>
    <el-button round type="goon" size="medium"  @click="fabu()" >确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="申请令牌"
      :visible.sync="dialogVisibleToken"
      width="30%"
      center
      :before-close="handleClose"
      @close="dialogCloseToken"
    >
      <el-form ref="tokenFormRef" :model="tokenForm" label-width="80px" :rules="tokenFormRule" >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="tokenForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="tokenForm.password"></el-input>
        </el-form-item>
        <el-form-item label="有效期" prop="time">
          <el-input v-model="tokenForm.time" style="width: 85%"></el-input>（分钟）
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button round type="goon" size="medium" @click="dialogVisibleToken = false">取 消</el-button>
       <el-button round type="goon" size="medium"  @click="addToken()" >申 请</el-button>
      </span>
       <span style="margin-left: 40px;margin-right: 8px" v-show="tokenShow">令牌 </span><el-input type="textarea"   v-show="tokenShow" autosize v-model="tokenForm.token" style="width: 80%"></el-input>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'gxmain',
    data() {
      return {
        layerInfo:[],
        //实现分页的数组
        allDa:[],
        chushiData:[],
        mapServerData:[],
        selectType:'',
        tInfo:{
          query:'',
          pageNumber:1,
          pageSize:10,
        },
        dialogVisible:false,
        dialogVisibleToken:false,
        total:10,
        multipleSelection: [],
        addForm:{
          serverUrl:'',
          serverName:'',
          serverToken:'',
          typeServer:''
        },
        tokenForm:{
          username:'',
          password:'',
          time:'',
          token:''
        },
        tokenShow:false,
        changeServer:[{
          value:'WMTSMapProvider',
          label:'WMTS服务'
        },{
          value:'WMSMapProvider',
          label:'WMS服务'
        },{
          value:'Rest',
          label:'Rest地图服务'
        }],
        serverType:[{
          value:'WMTSMapProvider',
          label:'WMTS服务'
        },{
          value:'WMSMapProvider',
          label:'WMS服务'
        },{
          value:'arcgisRest',
          label:'ArcGIS Rest地图服务'
        }],
        selectOption:[{
          value:'rest',
          label:'REST服务'
        },{
          value:'wmts',
          label:'WMTS服务'
        },{
          value:'wms',
          label:'WMS服务'
        }],
        searchServerName:'',
        addFormRule:{
          typeServer:[{required:true,message:'请选择服务标准',trigger:'blur'}],
          serverUrl:[{required:true,message:'请输入数据地址',trigger:'blur'}],
          serverName:[{required:true,message:'请输入服务名称',trigger:'blur'}],
        },
        tokenFormRule:{
          username:[{required:true,message:'请输入用户名',trigger:'blur'}],
          password:[{required:true,message:'请输入密码',trigger:'blur'}],
          time:[{required:true,message:'请输入时间',trigger:'blur'}],
        },
        serverlength:0
      }
    },
     created(){
    this.getServerList()
    },
    methods: {
      async  getServerList(){
        this.allDa=[];
        //const {data:result1}= await this.$http2.get('/iserver/services.rjson')
        const {data:result}= await this.$http2.get('/services.rjson')

        for(let i=0;i<result.length;i++){
          /*if(result[i].name.substring(0,7)=="map-shp"){
            var jso={layerName:result[i].name,fileName:result[i].additions[0],fwtype:'地图服务',gxtype:'内网共享',person:'兵团用户',time:'2020-12-31',url:result[i].url}
            this.allDa.push(jso)
          }*/
          console.log(result[i].componentType.substring(result[i].componentType.lastIndexOf(".")))
          if(result[i].componentType.substring(result[i].componentType.lastIndexOf("."))==".MapImpl"){
            if(result[i].interfaceType=='com.supermap.services.wmts.WMTSServlet'){
              var jso={layerName:result[i].name,fileName:result[i].additions[0],fwtype:'WMTS服务',gxtype:'内网共享',urlurl:result[i].url}
              this.mapServerData.push(result[i])
              this.allDa.push(jso)
            }else if(result[i].interfaceType=='com.supermap.services.wms.WMSServlet'){
              var jso={layerName:result[i].name,fileName:result[i].additions[0],fwtype:'WMS服务',gxtype:'内网共享',url:result[i].url}
              this.mapServerData.push(result[i])
              this.allDa.push(jso)
            }else {
            var jso={layerName:result[i].name,fileName:result[i].additions[0],fwtype:'地图服务',gxtype:'内网共享',url:result[i].url}
            this.mapServerData.push(result[i])
            this.allDa.push(jso)
            }
          }
        }
        if(this.serverlength==1){
          if(this.total<this.allDa.length){
            this.$message.success('注册服务成功！');
          }else {
            this.$message.error('注册服务失败！');
          }
          this.serverlength=0
          this.dialogVisible = false;
        }
          this.total=this.allDa.length;
          this.paging();
          this.chushiData=this.allDa;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(newSize){
        this.tInfo.pageSize=newSize;
        this.paging()
      },
      handleCurrentChange(newPage){
        this.tInfo.pageNumber=newPage;
        this.paging()
      },
      paging() {
        this.layerInfo = this.allDa.slice((this.tInfo.pageNumber - 1) * this.tInfo.pageSize, (this.tInfo.pageNumber - 1) * this.tInfo.pageSize + this.tInfo.pageSize)
      },
      async showMap(url){
        if(url.substring(url.lastIndexOf("/"))=="/rest"){
          var newurl=url.split("/iserver")[1]+"/maps.rjson";
          const {data:result}= await this.$http2.get(newurl)
          window.open(url+"/maps/"+result[0].name+".ol3")
        }else {
          window.open(url)
        }

      },
      async fabu(){
        this.$refs.addFormRef.validate(async valid =>{
          if(!valid)
            return
          if(this.addForm.typeServer=="WMSMapProvider"){
            const {data:result0}= await this.$http2.post('/manager/providers.rjson',{
              "config":{"cacheEnabled":false, "outputSite":"", "outputPath":"", "defaultScale":"0.00001", "serviceRootURL":this.addForm.serverUrl, "username":"", "password":"", "version":"1.1.1"},
              "name":this.addForm.serverName, "enable":true, "type":"com.supermap.services.providers.WMSMapProvider"
            })
            if(result0.succeed!==true){
              return this.$message.error('注册服务失败！'+result0.error.errorMsg)
            }
            const {data:result1}= await this.$http2.post('/manager/components.rjson',{
              "interfaceNames":"rest", "name":this.addForm.serverName, "providers":this.addForm.serverName, "config":{"outputPath":"", "outputSite":"", "logLevel":"info", "useCache":false, "tileCacheConfig":{"outputPath":"C:/supermap/supermap-iserver-10.1.0a-win64-zip/webapps/iserver/output/sqlite", "type":"SMTiles"}, "utfGridCacheConfig":{"type":"UTFGrid"}, "vectorTileCacheConfig":{"outputPath":null, "type":"SVTiles"}, "expired":0}, "type":"com.supermap.services.components.impl.MapImpl"
            })
            if(result1.succeed!==true){
              return this.$message.error('注册服务失败！')
            }
            this.$message.success('注册服务成功！');
            this.getServerList();
            this.dialogVisible = false;
          }else {
            const {data:result}= await this.$http2.post('/manager/providers.rjson',{
              "config":{"cacheEnabled":false, "outputSite":"", "outputPath":"", "serviceRootURL":this.addForm.serverUrl, "userName":"", "password":"",
                "dpi":"90.7142857142857", "token":this.addForm.serverToken, "layers":[{"identifier":"", "tileMatrixSet":""}]}, "name":this.addForm.serverName, "enable":true, "type":"com.supermap.services.providers."+this.addForm.typeServer
            })
            if(result.succeed!==true){
              return this.$message.error('注册服务失败！'+result.error.errorMsg)
            }
            const {data:result1}= await this.$http2.post('/manager/components.rjson',{
              "interfaceNames":"rest", "name":this.addForm.serverName, "providers":this.addForm.serverName, "config":{"outputPath":"", "outputSite":"", "logLevel":"info", "useCache":false, "tileCacheConfig":{"outputPath":"C:/supermap/supermap-iserver-10.1.0a-win64-zip/webapps/iserver/output/sqlite", "type":"SMTiles"}, "utfGridCacheConfig":{"type":"UTFGrid"}, "vectorTileCacheConfig":{"outputPath":null, "type":"SVTiles"}, "expired":0}, "type":"com.supermap.services.components.impl.MapImpl"
            })
            if(result1.succeed!==true){
              return this.$message.error('注册服务失败！')
            }
           // this.$message.success('注册服务成功！');
            this.serverlength=1;
            this.getServerList();

          /*  var l=this.serverlength
            this.getServerList();
            if(l==this.serverlength){
              this.$message.error('注册服务失败，没有预览地图，请检查您的地址或服务类型！');
            }*/

          }
        })
      },
      async addToken(){
        this.$refs.tokenFormRef.validate(async valid =>{
          if(!valid)
            return
           await this.$http2.post('/services/security/tokens.rjson',{
              userName:this.tokenForm.username,
              password:this.tokenForm.password,
              clientType:"NONE",
              expiration:this.tokenForm.time
            }).then((result)=>{
                this.tokenForm.token=result.data
                this.tokenShow=true;
           }).catch((error)=>{
             console.log(error)
             this.$message.error('您输入的账号密码错误！');
           })
          /*if(result.succeed!==true){
            return this.$message.error('申请令牌失败！'+result.error.errorMsg)
          }*/

        })
      },
      dialogClose(){
        this.$refs.addFormRef.resetFields();
      },
      dialogCloseToken(){
        this.$refs.tokenFormRef.resetFields();
        this.tokenShow=false;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      changeServerType(value){
        if(value=='WMTSMapProvider'){
          this.allDa=[];
          for(let i=0;i<this.mapServerData.length;i++){
            if(this.mapServerData[i].interfaceType=='com.supermap.services.wmts.WMTSServlet'){
              var jso={layerName:this.mapServerData[i].name,fileName:this.mapServerData[i].additions[0],fwtype:'WMTS服务',gxtype:'内网共享',person:'兵团用户',time:'2020-12-31',url:this.mapServerData[i].url}
              this.allDa.push(jso)
            }
          }
          this.total=this.allDa.length;
          this.paging()
        }else  if(value=='WMSMapProvider'){
          this.allDa=[];
          for(let i=0;i<this.mapServerData.length;i++){
            if(this.mapServerData[i].interfaceType=='com.supermap.services.wms.WMSServlet'){
              var jso={layerName:this.mapServerData[i].name,fileName:this.mapServerData[i].additions[0],fwtype:'WMS服务',gxtype:'内网共享',person:'兵团用户',time:'2020-12-31',url:this.mapServerData[i].url}
              this.allDa.push(jso)
            }
          }
          this.total=this.allDa.length;
          this.paging()
        }else if(value==''){
          this.allDa=[];
          for(let i=0;i<this.mapServerData.length;i++){
          if(this.mapServerData[i].interfaceType=='com.supermap.services.wmts.WMTSServlet'){
            var jso={layerName:this.mapServerData[i].name,fileName:this.mapServerData[i].additions[0],fwtype:'WMTS服务',gxtype:'内网共享',person:'兵团用户',time:'2020-12-31',url:this.mapServerData[i].url}
            this.allDa.push(jso)
          }else if(this.mapServerData[i].interfaceType=='com.supermap.services.wms.WMSServlet'){
            var jso={layerName:this.mapServerData[i].name,fileName:this.mapServerData[i].additions[0],fwtype:'WMS服务',gxtype:'内网共享',person:'兵团用户',time:'2020-12-31',url:this.mapServerData[i].url}
            this.allDa.push(jso)
          }else {
            var jso={layerName:this.mapServerData[i].name,fileName:this.mapServerData[i].additions[0],fwtype:'地图服务',gxtype:'内网共享',person:'兵团用户',time:'2020-12-31',url:this.mapServerData[i].url}
            this.allDa.push(jso)
          }
          }
          this.total=this.allDa.length;
          this.paging()
        }

      },
      searchServer(){
        if(this.searchServerName==''){
          this.allDa=this.chushiData;
          this.total=this.allDa.length;
          this.paging()
          return;
        }
        var newData=this.allDa;
        this.allDa=[];
        for(let i=0;i<newData.length;i++){
          console.log(newData[i].layerName)
          if(newData[i].layerName.indexOf(this.searchServerName)!=-1){
            this.allDa.push(newData[i])
          }
        }
        this.total=this.allDa.length;
        this.paging()
      },
      changeSearch(value){
        if(value==''){
          this.allDa=this.chushiData;
          this.total=this.allDa.length;
          this.paging()
          return;
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  ::v-deep .el-table th {
    display: table-cell!important;
  }
  .el-row{
    ::v-deep  .el-input__inner{
      border-radius: 45px;
    }

  }
.serverTable{
  position: absolute;
  width: 97%;
  padding: 0%;
  /*height: 100%;*/
  height: calc(100% - 140px);
}
  ::v-deep .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
  #content{
    position: absolute;
    top: 9.5%;
    bottom: 1%;
    left: 1%;
    right: 1%;
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  /deep/ .el-input-group__append{
    border-radius: 45px;
  }

  ::v-deep .cell{
    text-align: center;
  }
  /deep/ .el-table__empty-text{
    line-height:44px
  }
  /deep/ .el-table__empty-block{
    min-height: 44px;
  }
  /deep/ .el-table__body-wrapper {
    /*height: 200px; !* 滚动条整体高 必须项 *!*/
    border-right: none;
    overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
  }
  /deep/ .el-dialog--center .el-dialog__body{
    padding: 10px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width:6px;/* 滚动条的宽高 必须项 */
    height: 5px;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #bfcbd9;/* 滚动条的宽 */
    border-radius: 3px;
  }

</style>
